﻿@page "/table/filter"
@inject IStringLocalizer<TablesFilter> Localizer
@inject IStringLocalizer<Foo> FooLocalizer
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption

<h3>@Localizer["TablesFilterTitle"]</h3>

<h4>@Localizer["TablesFilterDesc"]</h4>

<ul class="ul-demo mt-3">
    <li>@((MarkupString)Localizer["TablesFilterDescLi1"].Value)</li>
    <li>@((MarkupString)Localizer["TablesFilterDescLi2"].Value)</li>
</ul>

<DemoBlock Title="@Localizer["FilterableTitle"]"
           Introduction="@Localizer["FilterableIntro"]"
           Name="Filterable">
    <p>@((MarkupString)Localizer["FilterableP"].Value)</p>
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)Localizer["FilterableLi1"].Value)</li>
        <li>@((MarkupString)Localizer["FilterableLi2"].Value)</li>
        <li>@((MarkupString)Localizer["FilterableLi3"].Value)</li>
        <li>@((MarkupString)Localizer["FilterableLi4"].Value)</li>
    </ul>
    <div>@((MarkupString)Localizer["FilterableDiv"].Value)</div>
    <Alert ShowBar="true" Color="Color.Info" class="mt-3">@((MarkupString)Localizer["FilterableAlert"].Value)</Alert>

    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["FilterTemplateTitle"]"
           Introduction="@Localizer["FilterTemplateIntro"]">
    <p>@((MarkupString)Localizer["TablesFilterTemplateDescription", ComponentSourceCodeUrl].Value)</p>

    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true">
                <Template Context="value">
                    <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true">
                <FilterTemplate>
                    <CustomerFilter></CustomerFilter>
                </FilterTemplate>
            </TableColumn>
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowFilterHeaderTitle"]"
           Introduction="@Localizer["ShowFilterHeaderIntro"]"
           Name="ShowFilterHeader">
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" ShowFilterHeader="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["DefaultSortTitle"]"
           Introduction="@Localizer["DefaultSortIntro"]"
           Name="DefaultSort">
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)Localizer["DefaultSortLi1"].Value)</li>
        <li>@((MarkupString)Localizer["DefaultSortLi2"].Value)</li>
    </ul>
    <p class="mb-3">@Localizer["DefaultSortP"]</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
        </TableColumns>
    </Table>

</DemoBlock>

<DemoBlock Title="@Localizer["SortListTitle"]"
           Introduction="@Localizer["SortListIntro"]"
           Name="SortString">
    <p class="mb-3">@((MarkupString)Localizer["SortListP"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" SortString="SortList"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["OnSortTitle"]"
           Introduction="@Localizer["OnSortIntro"]"
           Name="OnSort">
    <p class="mb-3">@((MarkupString)Localizer["OnSortP"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" SortString="@SortString" OnSort="OnSort"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["SetFilterInCodeTitle"]"
           Introduction="@Localizer["SetFilterInCodeIntro"]"
           Name="SetFilterInCode">
    <div class="mb-2">
        <Button Text="@Localizer["SetFilterInCodeButtonText1"]" OnClickWithoutRender="SetFilterInCode"></Button>
        <Button Text="@Localizer["SetFilterInCodeButtonText2"]" OnClickWithoutRender="ResetAllFilters"></Button>
    </div>

    <Table TItem="Foo" @ref="TableSetFilter"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" ShowFilterHeader="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="150" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>
